<template>
	<view class="page-container container">
		<view class="content">
			<view class="tab-content">
				<up-tabs
					:current="activeTabs"
					:activeStyle="{
						fontWeight: 'bold',
						transform: 'scale(1.05)'
					}"
					:lineWidth="30"
					:lineHeight="10"
					:lineColor="`url(${tabIcon}) 100% 100%`"
					:list="tabList"
					@click="clickTab"
				>
				</up-tabs>
			</view>
			<view class="flex-y-center justify-between mt-10px search-content">
				<SearchBtn class="flex-1" @jumpToUrl="jumpToSearch" />
				<view style="padding-left: 4px" @tap="filterIconClick">
					<u-icon name="/static/common/filter-icon.png" :size="20"></u-icon>
				</view>
			</view>
			<view class="list-content">
				<Recommend v-show="tabList[activeTabs].componentName === 'recommend'" :searchValue="searchValue"></Recommend>
				<Vicinity v-show="tabList[activeTabs].componentName === 'vicinity'" :searchValue="searchValue"></Vicinity>
				<UpToDate v-show="tabList[activeTabs].componentName === 'upToDate'" :searchValue="searchValue"></UpToDate>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { ref, reactive, computed } from 'vue';
import Recommend from './recommend/index.vue';
import Vicinity from './vicinity/index.vue';
import UpToDate from './up-to-date/index.vue';
import SearchBtn from '@/components/search-btn/search-btn.vue';

defineOptions({
	name: 'SolverHomeIndex'
});
// 当前激活的tab
const activeTabs = ref(0);
// tabs的列表
const tabList = reactive<UviewTabsItem[]>([
	{
		name: '推荐',
		componentName: 'recommend'
	},
	{
		name: '附近',
		componentName: 'vicinity'
	},
	{
		name: '最新',
		componentName: 'upToDate'
	}
]);
// 激活tab的icon
const tabIcon = '/static/solver-home/tab-select-icon.png';

const clickTab = (obj: InstanceType<typeof UTabs>) => {
	activeTabs.value = obj.index;
};

// 点击筛选icon
const filterIconClick = () => {
	uni.navigateTo({
		url: '/pages/solver/home/filter/index'
	});
};

// 点击搜索input
const jumpToSearch = () => {
	uni.navigateTo({
		url: '/pages/solver/home/search/index'
	});
};
</script>

<style lang="scss">
@import '@/styles/common.scss';

.container {
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	/* 添加垂直方向的透明度渐变 */
	background:
	        /* 垂直方向透明度渐变 */ linear-gradient(to top, rgba(247, 247, 247, 1) 50%, rgba(247, 247, 247, 0) 100%),
		/* 水平方向颜色渐变 */ linear-gradient(to right, rgba(228, 252, 78, 0.3), rgba(78, 252, 189, 0.3));
	/* 确保两个渐变叠加在一起 */
	background-blend-mode: lighten;
}

.content {
	width: calc(100% - 40rpx);
	height: calc(100% - 100rpx);
	margin: 20rpx;
	padding-bottom: 110rpx;
}

.list-content {
	width: 100%;
	height: calc(100% - 98px);
	margin: 10px 0;
	overflow: auto;
	background-color: transparent;
}
</style>
